<#import '/fed/demo/inc/macros.ftl' as macros />
<@macros.header 'dialogform'>
  <link href="${cssRoot}/admin-dialog.css" rel="stylesheet">
</@macros.header>

<#global demos = [
  {
    'n': 'normal',
    'd': '\'\'',
    's': '表单',
    'e': '<div id="demo-container"></div>',
    'c': ['new DialogForm({
  formOptions: {
    data: {
      groups: [
        {
          label: \'用户名\',
          attrs: {
            type: \'text\',
            name: \'username\',
            value: \'CY8888\',
            placeholder: \'CYXXXX\',
            readonly: \'readonly\',
            required: \'required\'
          }
        },
        {
          label: \'密码\',
          attrs: {
            type: \'password\',
            name: \'password\',
            value: \'\',
            placeholder: \'\',
            required: \'required\'
          }
        }
      ]
    }
  },
  events: {
    formData: function (e) {
      var formData = e.target.formData;
      formData.append(\'a\', \'1\');
      formData.append(\'a\', \'1\');
      formData.append(\'b\', [1, 2]);
      formData.append(\'b\', [3, 4]);
      formData.append(\'c\', {d: 1, e: 2});
      formData.append(\'c\', {f: 1, g: 2});
    },
    progress: function () {
      console.log(arguments);
    },
    done: function () {
      console.log(arguments); return false;
    },
    fail: function () {
      console.log(arguments);
    }
  }
});']
  },
  {
    'n': 'upload',
    'd': '\'\'',
    's': '表单',
    'e': '<div id="demo-container2"></div>',
    'c': ['new DialogForm({
  formOptions: {
    data: {
      groups: [
        {
          label: \'文件\',
          attrs: {
            type: \'file\',
            name: \'filename\',
            value: \'\',
            placeholder: \'CYXXXX\',
            multiple: \'multiple\',
            required: \'required\'
          }
        },
        {
          label: \'注释\',
          value: \'\',
          attrs: {
            type: \'multiline\',
            name: \'description\',
            placeholder: \'CYXXXX\',
            required: \'required\'
          }
        }
      ]
    }
  },
  events: {
    formData: function (e) {
      var formData = e.target.formData;
      formData.append(\'a\', \'1\');
      formData.append(\'a\', \'1\');
      formData.append(\'b\', [1, 2]);
      formData.append(\'b\', [3, 4]);
      formData.append(\'c\', JSON.stringify({d: 1, e: 2}));
      formData.append(\'c\', JSON.stringify({f: 1, g: 2}));
    },
    progress: function () {
      console.log(arguments);
    },
    done: function () {
      console.log(arguments); return false;
    },
    fail: function () {
      console.log(arguments);
    }
  }
});']
  }
]>

<@macros.body 'dialogform' 'dialogform'>
<div class="well">
  <p>带有进度反馈的表单提交，通过事件订阅 `progress`</p>
</div>
</@macros.body>

<@macros.footer>
  <script>
    seajs.use(['${appRoot}/common/form/dialogform'], function (DialogForm) {
      $('.demo > button').on('click', function () {
        new Function('DialogForm', this.nextElementSibling.textContent)(DialogForm);
      }).eq(0).trigger('click');
    });
  </script>
</@macros.footer>